<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="tf-image-loader.html">
<link rel="import" href="../tf-imports/lodash.html">
<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">

<!--
tf-image-grid creates a grid for examining image data. The columns correspond
to runs and the rows correspond to tags. Each cell is an image.

Structurally, it makes extensive use of flexbox for layout: it has a top-level
columnar flexbox that contains the topRow (run names) and then a
bottomContainer. The bottomContainer is another columnar flexbox which contains
repeated image-rows. Each image-row is a row flexbox which contains a tag name
cell, and then image cells.

In the future, we should improve on the layout by making the tag names and run names have fixed positions
within the image-grid, so that when you scroll you always have context (e.g. row and column names in a spreadsheet).
For now, it just scrolls.

The image grid provides internal scroll bars (with styling) so that it can be dropped into
a dashboard in a predictable fashion, even though the internal image grid may be enormous.

Room for future improvement:

- Make it obvious when an image didn't load due to the image not existing.
- Find some way to collapse sparse image grids into denser ones (when sparsity
is high)
- Fix column/row names
- Include hook for loading past images (by step/timestamp? or index?)

-->
<dom-module id="tf-image-grid">
  <template>
    <style include="scrollbar-style"></style>
    <div id="fullContainer" class="container scrollbar">
      <div id="topRow" class="container">
        <div class="noshrink cell" id="paddingCell"></div>
        <template
          is="dom-repeat"
          items="[[runs]]"
          as="run"
        >
        <div class="run-name-cell cell noshrink">
          <span>[[run]]</span>
        </div>
      </template>
      </div>
      <div id="bottomContainer" class="container">
        <template
          is="dom-repeat"
          items="[[tags]]"
          as="tag"
        >
          <div class="image-row container noshrink">
            <div class="tag-name-cell cell noshrink">
              <span class="tag-name">[[tag]]</span>
            </div>
            <template
              is="dom-repeat"
              items="[[runs]]"
              as="run"
            >
              <div class="image-cell cell noshrink">
                <template is="dom-if" if="[[_exists(run, tag, runToImages.*)]]">
                  <tf-image-loader
                    id="loader"
                    run="[[run]]"
                    tag="[[tag]]"
                    images-generator="[[imagesGenerator]]"
                  >
                  </tf-image-loader>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      .container {
        display: flex;
        flex-wrap: nowrap;
      }
      #fullContainer {
        width: 100%;
        height: 100%;
        flex-direction: column;
        padding-top: 20px;
        overflow: scroll;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      #topRow {
        flex-direction: row;
      }
      #bottomContainer {
        flex-direction: column;
        height: 100%;
        width: 100%;
      }
      .cell {
        margin-right: 10px;
      }
      .image-row {
        flex-direction: row;
        padding-top: 10px;
      }
      .image-cell {
        width: 300px;
        height: 300px;
      }
      .tag-name-cell {
        height: 300px;
        width: 300px;
        display:flex;
        flex-direction: column;
        justify-content: center;
      }
      .tag-name {
        word-wrap: break-word;
        text-align: center;
        white-space: nowrap;
      }
      .run-name-cell {
        width: 300px;
        word-break:break-all;
        text-align: center;
      }
      .noshrink {
        flex-shrink: 0;
      }
      #paddingCell {
        width: 300px;
        height: 30px;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-image-grid",
      properties: {
        runToImages: Object,
        tags: Array,
        runs: Array,
        imagesGenerator: Function,
      },
      _exists: function (run, tag) {
        return this.runToImages[run].indexOf(tag) !== -1;
      },
    });
  </script>
</dom-module>
